<template>
  <div class="appointment-summary">
    <div class="header">
      <h2>会议纪要</h2>
      <el-button type="primary" @click="goBack" icon="ArrowLeft">返回</el-button>
    </div>

    <el-card class="summary-card" shadow="hover">
      <!-- 基本信息部分 -->
      <div class="section">
        <div class="section-header">
          <div class="section-title">
            <div class="line-indicator"></div>
            <span>基本信息</span>
          </div>
        </div>

        <div class="info-grid">
          <div class="info-item">
            <div class="info-label">会议名称：</div>
            <div class="info-value">{{ meetingData.AppointmentsName }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">会议时间：</div>
            <div class="info-value">{{ formatDateTime(meetingData.CreateTime) }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">会议地点：</div>
            <div class="info-value">{{ meetingData.MeetAddr }}</div>
          </div>
        </div>

        <div class="participants-section">
          <div class="participant-row">
            <div class="participant-label">参会人员：</div>
            <div class="participant-tags">
              <el-tag 
                v-for="(person, index) in participantsList" 
                :key="index"
                class="participant-tag"
                effect="plain"
              >
                {{ person }}
              </el-tag>
            </div>
          </div>
          <div class="participant-row">
            <div class="participant-label">主持人：</div>
            <div class="participant-value">{{ meetingData.MeetPeople }}</div>
          </div>
          <div class="participant-row">
            <div class="participant-label">记录人：</div>
            <div class="participant-value">李四</div>
          </div>
          <div class="participant-row">
            <div class="participant-label">决议人：</div>
            <div class="participant-value">王五</div>
          </div>
        </div>
      </div>

      <!-- 会议内容部分 -->
      <div class="section">
        <div class="section-header">
          <div class="section-title">
            <div class="line-indicator"></div>
            <span>会议内容</span>
          </div>
        </div>

        <div class="content-section">
          <div class="content-item">
            <div class="content-number">一、实施项目程序要求：</div>
            <div class="content-text">
              首先，召集村民反开村民大会，就确定村民自做项目进行表决，同意的在表决记录上签字并盖印，如占不同意的比例占大多数村民就不能自己实施项目，如比例小，就写明不同意的理由，并签字盖盖印。
              其次，村民要在项目实施前选出项目监督组、物资采购组、物资采购组主要是采购水泥、砂石、碎石等，采购的材料要进行登记，项目监督组要对该项目采购的物资，质量都进行全程监督，确保项目质量，采购组和监督组都要在采购的物资清单上签字。
              项目实施中要把村民投工投劳的天数进行登记，项目实施完成后，乡政府和村委会进行初验，在初验中认为质量有问题的就进行整改，整合合格后就发的满财政。扶贫等相关部门验收，验收合格后才能做报账的资料。
            </div>
          </div>
          <div class="content-item">
            <div class="content-number">二、施工队选择项目要求</div>
            <div class="content-text">
              召开村民大会，确定一家有资质的施工队。其次，通过村民确定的施工工队......
            </div>
          </div>
        </div>
      </div>

      <!-- 会议附件部分 -->
      <div class="section">
        <div class="section-header">
          <div class="section-title">
            <div class="line-indicator"></div>
            <span>会议附件</span>
          </div>
        </div>

        <div class="attachment-section">
          <div class="attachment-item">
            <el-icon><Document /></el-icon>
            <a href="javascript:void(0);" class="attachment-link">会议附件.zip</a>
            <el-button size="small" type="primary" plain>下载</el-button>
          </div>
        </div>

        <div class="send-option">
          <el-checkbox v-model="sendToParticipants">保存成功后，自动通过邮件的方式将会议纪要发送给参会人员</el-checkbox>
        </div>

        <div class="action-buttons">
          <el-button type="primary" @click="saveSummary">保存</el-button>
          <el-button @click="goBack">取消</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Document, Calendar, Location, User } from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();
const sendToParticipants = ref(true);

// 默认数据，用于初始化或者API请求失败时显示
const defaultData = {
  AppointmentsId: 0,
  AppointmentsName: '未知会议',
  AppointmentsTemplate: 0,
  MeetMain: '未知主题',
  MeetManagerId: 0,
  MeetPeople: '张三',
  CreateTime: new Date(),
  StartTime: new Date(),
  EndTime: new Date(),
  JoinPeople: '张三,李四,王五,赵六,孙七,迪丽热巴,西门吹雪,易家伟,盖伦,田依依,黄子贤,米兰',
  MeetDesc: '无会议内容',
  MeetSign: false,
  MeetPassphrase: false,
  MeetMessage: false,
  MeetRemote: false,
  MeetStatus: 2,
  MeetName: '未知会议室',
  MeetPhoto: '',
  MeetPeopleNum: '12',
  MeetAddr: '总部1101室',
  MeetAdmin: '未知管理员',
  AdminTel: '027-81234567-1',
  IsBooking: false,
  IsMeetRoom: false
};

// 从sessionStorage获取会议数据
let sessionData = defaultData;
try {
  const storedData = sessionStorage.getItem('appointmentData');
  if (storedData) {
    sessionData = JSON.parse(storedData);
  }
} catch (error) {
  console.error('解析会议数据失败:', error);
}

const meetingData = ref(sessionData);

// 解析参会人员列表
const participantsList = computed(() => {
  if (!meetingData.value.JoinPeople) return [];
  return meetingData.value.JoinPeople.split(',').map(item => item.trim()).filter(item => item);
});

// 格式化日期时间
const formatDateTime = (dateTime: string | Date) => {
  if (!dateTime) return '';
  const date = new Date(dateTime);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 保存会议纪要
const saveSummary = () => {
  ElMessage.success('会议纪要保存成功');
  if (sendToParticipants.value) {
    ElMessage.info('已自动发送会议纪要给所有参会人员');
  }
  setTimeout(() => {
    router.back();
  }, 1500);
};

onMounted(() => {
  // 如果没有从sessionStorage获取到数据，可以在这里通过ID从API获取
  if (!sessionStorage.getItem('appointmentData') && route.query.id) {
    // 这里可以添加API调用，根据ID获取会议详情
    console.log('需要通过API获取会议ID:', route.query.id);
    // 模拟API调用
    // fetchAppointmentDetails(route.query.id);
  }
});
</script>

<style scoped>
.appointment-summary {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.summary-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.section {
  margin-top: 24px;
}

.section-header {
  margin-bottom: 16px;
}

.section-title {
  display: flex;
  align-items: center;
}

.line-indicator {
  width: 4px;
  height: 18px;
  background-color: #409eff;
  margin-right: 8px;
  border-radius: 2px;
}

.section-title span {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
}

.info-label {
  font-weight: 500;
  color: #606266;
  min-width: 80px;
}

.info-value {
  color: #303133;
}

.participants-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid #EBEEF5;
  padding-top: 16px;
}

.participant-row {
  display: flex;
}

.participant-label {
  font-weight: 500;
  color: #606266;
  min-width: 80px;
}

.participant-value {
  color: #303133;
}

.participant-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.participant-tag {
  margin-right: 4px;
}

.content-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.content-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.content-number {
  font-weight: 500;
  color: #303133;
}

.content-text {
  color: #606266;
  line-height: 1.6;
  text-indent: 2em;
  white-space: pre-line;
}

.attachment-section {
  margin-bottom: 20px;
}

.attachment-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  margin-bottom: 12px;
}

.attachment-item .el-icon {
  margin-right: 8px;
  font-size: 18px;
  color: #606266;
}

.attachment-link {
  flex: 1;
  color: #303133;
  text-decoration: none;
}

.attachment-link:hover {
  color: #409eff;
  text-decoration: underline;
}

.send-option {
  margin: 20px 0;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
</style> 